<template>
 <div>
 <mt-swipe :auto="4000">
  <mt-swipe-item v-for='(item, index) in this.bannerList' :key='index'>
       <div class="common-banner bacn" :style='{backgroundImage: "url(" + item.image + ")"}' style="height: 10.33rem;"></div>
  </mt-swipe-item>
</mt-swipe>
 <div class="resources">
      <div>全网络流量资源</div>
      <div>每天有超过十亿用户使用360、微博、爱奇艺等众多互联网产品，他们搜索想要了解的知识，分享自己感兴趣的内容，浏览商业信息。我们帮助您与这些受众建立联系，将优质商业信息推送给真正需要的人。</div>
<table border="0" class="table">
<tr>
  <td><img src="static/images/asd0fe97l2@3x.png">
  <span>优酷</span>
  </td>
  <td><img src="static/images/0b142cc74e49d841c120e2ff2e5757eb@3x.png">
   <span>360手机助手</span>
  </td>
  <td><img src="static/images/WechatIMG37@3x.png">
   <span>陌陌</span>
  </td>
  <td><img src="static/images/5ccf375a899f8d7035ca0b3347fb53dd@3x.png">
   <span>360浏览器</span>
  </td>
</tr>
<tr>
  <td><img src="static/images/uc@3x.png">
  <span>UC浏览器</span>
  </td>
  <td><img src="static/images/爱奇艺图标@3x.png">
   <span>爱奇艺视频</span>
  </td>
  <td><img src="static/images/阿里文娱.jpg">
   <span>阿里文娱</span>
  </td>
  <td><img src="static/images/微博@3x.png">
   <span>新浪</span>
  </td>
</tr>
</table>
    </div>
    <div class="format">
        <div>全类型广告形式</div>
      <div>搜索广告、图文广告、信息流广告、视频广告、互动广告等全类型广告形式全面覆盖互联网用户人群，给广告主提供最优选择。</div>
      <table border="0" class="format-table">
<tr>
  <td><i class="iconfont glyphicon glyphicon-search"></i>
  <span>搜索广告</span>
  </td>
  <td><i class="iconfont glyphicon glyphicon-tianchong"></i>
   <span>信息流广告</span>
  </td>
  <td><i class="iconfont glyphicon glyphicon-tuwen"></i>
   <span>图文广告</span>
  </td>
  <td><i class="iconfont glyphicon glyphicon-shiping"></i>
   <span>视频广告</span>
  </td>
  <td><i class="iconfont glyphicon glyphicon-hudong "></i>
   <span>互动广告</span>
  </td>
</tr>
</table>
    </div>
 <div class="layout">
<div>全场景流量布局</div>
      <div>媒体流量涉及到社交、搜索、购物、浏览、资讯、工具、应用下载等场景，全场景布局覆盖拓展广告主全面营销范围，与用户建立良性的友好关系。</div>
<img src="static/images/lanse@3x.png">
 </div>
 <div class="models">
<div>多种营销模式</div>
<div class="mod-list">
    <div><i class="iconfont glyphicon glyphicon-pingpai"></i>
    <div class="model-span"><span>品牌营销</span>
    <span>提供实时行业，人群分析&nbsp;&nbsp;&nbsp;&nbsp;品牌客户全案整合&nbsp;&nbsp;&nbsp;&nbsp;精品资源助力品牌营销</span>
    </div>
    </div>
    <div style="margin-top: .2rem;"><i class="iconfont glyphicon glyphicon-miaozhun"></i>
     <div class="model-span"> <span>精准营销</span>
    <span>精准锁定泛行业消费人群&nbsp;&nbsp;&nbsp;&nbsp;整合高性价比资源&nbsp;&nbsp;&nbsp;&nbsp;让您的企业营销省时省力</span>
    </div>
    </div>
    <div style="padding-top: .2rem;"><i class="iconfont glyphicon glyphicon-dingzhi"></i>
    <div class="model-span"> <span>行业营销</span>
    <span>金融、游戏、旅游行业定制&nbsp;&nbsp;&nbsp;&nbsp;合理开展精品活动&nbsp;&nbsp;&nbsp;&nbsp;为您的营销活动推波助澜</span>
    </div>
    </div>
</div>
 </div>
 <div class="services">
<div class="ser-local">本地化专业服务</div>
<div class="flex-indexcontainer">  
  <div class="flex-index">
     <i class="iconfont glyphicon glyphicon-team"></i>
     <span></span>
     <div>
         <p>优质运营</p>
         <p>核心运营团队</p>
        <p> 均有四年以上运营经验</p>
        <p> 能快速响应服务</p>
     </div>
  </div>
  <div class="flex-index" style="margin-left:1.33rem;">
      <i class="iconfont glyphicon glyphicon-yizhan"></i>
     <span></span>
     <div>
         <p>一站采买</p>
         <p>全媒体覆盖</p>
         <p>一站式采买</p><p>全案整合</p>
     </div>
  </div>
</div>
<div class="flex-indexcontainer">  
  <div class="flex-index">
     <i class="iconfont glyphicon glyphicon-fuwu "></i>
     <span></span>
     <div>
         <p>服务保障</p>
         <p>从公司成立至今</p><p>无任何客户投诉和负面新闻</p><p>服务保障值得信赖</p>
     </div>
  </div>
  <div class="flex-index" style="margin-left:1.33rem;">
      <i class="iconfont glyphicon glyphicon-fenlei"></i>
     <span></span>
     <div>
         <p>行业专项</p>
         <p>按行业细分专项服务</p><p>涵盖金融、电商、游戏等</p><p>深钻行业趋势与数据</p>
     </div>
  </div>
</div>
</div>
<div class="introduce"> 
  <div>请广告顾问来电为您介绍</div>
  <div>留下您的联系方式 ，我们的广告顾问将与您联系，免费咨询</div>
  <form>
  <p class="action-p"> <i class="iconfont glyphicon glyphicon-dalou"></i> 
      <input type="text" name="company_name" placeholder="企业名称 （必填）" v-model="form.company_name" @blur="checkcomname"/></p>
      <div class="error-message" style="color:red;">{{this.form.msgcomname}}</div>
      <label class="checkbox">
          <span>
              <input type="checkbox" class="checkbox-input" value="">
              <span class="checkbox-inner"></span>
              </span>
              <span> 我是个人广告主</span>
              </label>
<p><p>
 <p class="action-p" style="margin-top:1.5rem"> <i class="iconfont glyphicon glyphicon-user "></i>
      <input type="text" name="name" placeholder="姓名（必填）" v-model="form.name"  @blur="checkname"/></p>
       <div class="error-message" style="top:91.3rem">{{this.form.msgame}}</div>
      <p class="action-p" style="margin-top:1.5rem"> <i class="iconfont glyphicon glyphicon-mobile "></i>
      <input type="text" name="mobile" placeholder="手机（必填）" v-model="form.mobile"  @blur="checkphone"/></p>
       <div class="error-message"    style="top: 94.7rem;">{{this.form.msgmobile}}</div>
      <p class="action-p" style="margin-top:1.5rem"> <i class="iconfont glyphicon glyphicon-mail"></i>
      <input type="text" name="email" placeholder="邮箱" v-model="form.email"  @blur="checkemail"/></p>
       <div class="error-message" style="top: 98.3rem;">{{this.form.msgemail}}</div>
  <input type="button" value="预约顾问咨询" class="buttom" @click="submitData()"/>
</form>
</div>
 </div>
</template>
<script>
 import {Swipe, SwipeItem, Toast} from 'mint-ui'
 import 'mint-ui/lib/style.css'
import './../../styles/glyphicon.less'
import { getBanner, addApply } from '@/api/ajax'
 export default {
 components: {
  'mt-swipe': Swipe,
  'mt-swipe-item': SwipeItem
 },
 data () {
    return {
        changeRed: 0,
        banner: '',
        bannerList: [],
        form: {
            company_name: '',
            name: '',
            mobile: '',
            email: '',
            msgame:'',
            msgmobile:'',
            msgemail:'',
            msgcomname:'',
        }
    }
 },
 mounted () {
    getBanner({type: 1}).then(res => {
        this.bannerList = res.data.list
        
    })
 },
  methods: {
   submitData () {
    addApply(this.form).then(res => {
        console.log(res);
        Toast('提交成功');
    }, message => {
      Toast('提交失败');
})
    
   },
  checkname(){
        console.log('name');
         if(this.form.name==""){
              this.form.msgame = "必填内容不能为空";
              this.form.name.style="border:0.7rem solid red"
              return false;
           }else{
                    this.form.msgame = "";
                }
            },
    checkemail(){
        console.log('email')
        var regEmail=/^[A-Za-zd]+([-_.][A-Za-zd]+)*@([A-Za-zd]+[-.])+[A-Za-zd]{2,5}$/;
        if(this.form.email==''){
          this.form.msgemail="必填内容不能为空";
          return false;
        }else if(!regEmail.test(this.form.email.val)){
            this.form.msgemail="邮箱格式不正确";
        }else{
                   this.form.msgemail= "";
                }
        },
     checkphone(){
        console.log('phone')
                var myreg = /^(\d{11})$/; 
                if(this.form.mobile==""){
                    this.form.msgmobile="必填内容不能为空";
                    return false;
                }else if(this.form.mobile.val>11){
                    this.form.msgmobile="手机号码格式不正确";
                }else{
                   this.form.msgmobile= "";
                }
            },
     checkcomname(){
                 if(this.form.company_name==""){
                    this.form.msgcomname= "企业名称不符合要求";
                    return false;
                }else{
                    this.form.msgcomname="";
                }
            }
 },
 }
</script>
<style lang="less">
.introduce form p input:hover{
      border:.07rem solid#426DA5;
   outline:none;
   
}
.introduce form p i:blur{

}
 img {
 width: 100%;
 height:9.375rem;

 }
 .mint-swipe {
 height:9.375rem;
 }
 .desc {
 font-weight: 600;
 opacity: .9;
 padding:.3125rem;
 height:1.25rem;
 line-height:1.25rem;
 width: 100%;
 color: #fff;
 position: absolute;
 bottom: 0;
 }
 .resources{
     div:first-child{
     width:6.3125rem;
height:.875rem;
font-size:.875rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .9375rem;
letter-spacing:.0235rem;
 }
 div:nth-child(2){
   width:21.125rem;
height:4.6875rem;
font-size:.75rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .8125rem;
letter-spacing:.0625rem;
line-height:1.2444rem;
 }
 .table{
      width:21.125rem;
     height: auto;
     margin: 0 auto;
          margin-top:.9375rem;
     tr{
    display: block;
     width:100%;
     height: auto;
     text-align: center;
     }
     tr:last-child{
         padding-top:1.25rem;
     }
     td{
         display: inline-block;
         width: 24%;
     }
     td img{
         width:2rem;
         height:2rem;
     }
     td span{
         display: block;
      width:auto;
height:.5rem;
font-size:.5rem;
font-weight:bold;
letter-spacing:.0425rem;
color:rgba(51,51,51,1);
     }
 }
 }
 .format{
     width: 100%;
     height: 10.875rem;
     position: relative;
    background:rgba(242,242,242,1);
    margin-top: .9375rem;
       div:first-child{
           width:6.3125rem;
height:.875rem;
font-size:.875rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin: 0 auto;
padding-top:.9375rem;
letter-spacing:.0235rem;
       }
       div:nth-child(2){
   width:21.125rem;
height:3.9999rem;
font-size:.75rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin: 0 auto;
margin-top: .8125rem;
letter-spacing:.0625rem;
line-height:1.2444rem;
 }
 }
 .format-table{
     width: 21.0625rem;
     height: auto;
     margin: 0 auto;
     text-align: center;
     margin-top: 0.5rem;
     td i{
         width:3.375rem;
         height:1.375rem;
         color: #426DA5;
         font-size: 1.3rem;
         }
      td span{
         display: block;
      width:auto;
height:.5rem;
font-size:.5rem;
font-weight:bold;
letter-spacing:.0425rem;
color:rgba(51,51,51,1);
margin-top: 0.6rem;
     }
 }
 .layout{
     width: 100%;
     height: 9.875rem;
     position: relative;
    margin-top: .9375rem;
    margin: 0 auto;
       div:first-child{
           width:6.3125rem;
height:.875rem;
font-size:.875rem;
font-weight:bold;
color:rgba(51,51,51,1);
padding-top:.9375rem;
letter-spacing:.0235rem;
text-align: left;
margin-left:2rem;
       }
       div:nth-child(2){
  width:10.6875rem;
height:3.9375rem;
font-size:.625rem;
font-weight:bold;
color:rgba(51,51,51,1);
letter-spacing:.0625rem;
line-height:1.2444rem;
margin-left:2rem;
margin-top:.875rem; 
 }
 img{
     display: block;
     width: 9.625rem;
     height: 5.6875rem;
     float: right;
     position: absolute;
     right: 2rem;
     top:2rem;
 }
 }
   .models>div:first-child{
           width:6.3125rem;
height:.875rem;
font-size:.875rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin: 0 auto;
padding-top:.9375rem;
letter-spacing:.0235rem;
}
 .models{
     width:100%;
height:16.375rem;
background:rgba(242,242,242,1);
    .mod-list{
     width:20.9375rem;
height:auto;
margin: 0 auto;
margin-top:.9375rem;
line-height:3.33rem;
   div{
     width:20.9375rem;
height:4.125rem;
background:rgba(255,255,255,1);
margin-top:.1875rem; 
display: table;
 i{
 width:2rem;
height:2rem;
display: block;
border:.125rem solid rgba(130,162,204,1);
border-radius:50%;
float: left;
font-size: 1.37rem;
text-align: center;
  position: relative;
  left: .87rem;
  top:.9rem;
  display: table-cell;
    vertical-align: middle;
    line-height:2.2rem;
    margin: auto;
    color: rgba(130,162,204,1);
}
 .model-span{
     width: 16.375rem;
     height: auto;
     float:right;
    position: relative;
    right: 1.25rem;
    span:nth-child(1){
        display: block;
        width:3.8125rem;
height:.6875rem;
font-size:.6875rem;
font-weight:bold;
position: relative;
left: 1rem;
top: -.6rem;
color:rgba(51,51,51,1);

    }
    span:nth-child(2){
        width:16.875rem;
        display: block;
height:.5rem;
font-size:.5rem;
position: relative;
left: 1rem;
font-weight:bold;
color:rgba(51,51,51,1);
padding-top:.3125rem;
    }
 }
   }
    }
    }
    .services{
     width: 100%;
     height:auto;
     position: relative;
    margin-top: .9375rem;
      .ser-local{
           width:6.3125rem;
height:.875rem;
font-size:.875rem;
font-weight:bold;
color:rgba(51,51,51,1);
margin: 0 auto;
    }
    }

.flex-indexcontainer {
  display: flex;
  margin: 0 auto;
  margin-top: 1rem;
}

/* 以下为辅助样式 */
.flex-indexcontainer>div{
    width:10.8rem;
height:4.4rem;
background:rgba(210,227,250,1);
margin-left: 3.33rem;
 margin: 0 auto;
i{
    width:2.27rem;
height:1.73rem;
display: block;
float: left;
font-size: 2.67rem;
text-align: center;
  position: relative;
  left:.67rem;
  top:1.4rem;
    line-height:1.9rem;
    margin: auto;
   color:#426da5;
    z-index: 99;
}
span{
    width:.07rem;
height:2.6rem;
display: inline-block;
background:rgba(255,255,255,1);
position: relative;
left: 1.67rem;
top:.93rem;
}
div{
    width: 4.8rem;
        position: relative;
    float: right;
    right: 1.2rem;
     margin: 0 auto;
         padding-top: 0.3rem;
    p:nth-child(1){
        width:4.57rem;
height:.6rem;
font-size:.53rem;
font-family:STHeitiSC-Light;
font-weight:bold;
color:rgba(51,51,51,1);
text-align: center;
position: relative;
left: 0.26rem;
    }
    p{
        width:5.73rem;
    height: 0.17rem;
font-size:.47rem;
font-family:STHeitiSC-Light;
font-weight:bold;
color:rgba(51,51,51,1);
text-align: center;
    position: relative;
    left: -0.36rem;
    }
}
}
.flex-indexcontainer>div:nth-child(2){
  margin-left:.8rem;
  width:10.8rem;
height:4.4rem;
background:rgba(210,227,250,1);
}
.introduce{
      width:100%;
height:24.27rem;
margin-top: 1rem;
background:rgba(242,242,242,1);
div:nth-child(1){
    width:10.53rem;
height:.93rem;
font-size:.93rem;
font-family:PingFang-SC-Regular;
font-weight:bold;
color:rgba(51,51,51,1);
text-align: center;
margin: 0 auto;
padding-top: 1rem;
}
div:nth-child(2){
    width:22.33rem;
height:.8rem;
font-size:.8rem;
margin: 0 auto;
margin-top: 1rem;
text-align:center;
font-family:PingFang-SC-Regular;
font-weight:bold;
color:rgba(102,102,102,1);
}
form{
    .action-p{
    position: relative;
i{
    width:1.4rem;
height:1.2rem;
color:#9a9a9a;
    position: absolute;
        top: .37rem;
    left: 2rem;
    z-index: 999;
    font-size: 1.4rem;
}
 input{
        width: 19.33rem;
height:1.8rem;
background:rgba(255,255,255,1);
border:1px solid rgba(215,213,213,1);
margin: 0 auto;
margin-top: .6rem;
display: table;
 line-height:2rem;
font-size:.73rem;
font-family:PingFang-SC-Regular;
font-weight:bold;
color:#000;
padding-left: 2rem;
}
}
p:nth-child(2){
      width:22.33rem;
height:1.8rem;
margin: 0 auto;
margin-top:.67rem;
display: table;
input{
   width:.73rem;
height:.73rem;
background:rgba(255,255,255,1);
border:1px solid rgba(215,213,213,1);
display: table-cell;
    vertical-align: middle;
}
span{
    display: inline-block;
    padding-left: 1rem;
font-size:.73rem;
font-family:STHeitiSC-Light;
font-weight:bold;
color:rgba(102,102,102,1);
}
}
.buttom{
    width:22.33rem;
height:1.8rem;

display: block;
background:rgba(66,109,165,1);
margin:0 auto;
border:none;
margin-top: 2rem;
font-size:.73rem;
font-family:PingFang-SC-Regular;
font-weight:bold;
color:rgba(255,255,255,1);
}
    }
    .error-message{
            position: absolute;
    left: 13rem;
    width: 12rem !important;
    top: 85.2rem;
        height: .8rem;
    font-size: .8rem;
    margin: 0 auto;
    margin-top: 1rem;
    text-align: center;
    font-family: PingFang-SC-Regular;
    font-weight: bold;
    color: red;
    
    }
    .checkbox{
            position: relative;
    left: 2rem;
    top:0.4rem;
    span:nth-child(1){
    font-size: .87rem;
    font-variant: tabular-nums;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;
    top: -0.09em;
    input{
            display: block;
    box-sizing: border-box;
    outline: none;
    color:#fff;
        position: absolute;
    left: 0;
    z-index: 3;
    cursor: pointer;
    top: 0;
    bottom: 0;
    right: 0;
        width: .87rem;
    height:.87rem;
    }
    span{
        z-index: 2;
            position: relative;
    display: block;
    width: .87rem;
    height:.87rem;
    border: .07rem solid #d9d9d9;
    border-radius: .13rem;
    background-color: #fff;
    }

    }
    }
}

</style>

